{% extends "base.html" %}

{% block title %}Admin Dashboard | Service Performance Reporting Portal{% endblock %}

{% block extra_css %}

<style>

    .dashboard-header {
        margin-bottom: 30px;
    }

    .dashboard-title {
        margin: 0;
        color: #1f2933;
        font-size: 28px;
        font-weight: 700;
    }

    .dashboard-subtitle {
        margin: 8px 0 0;
        color: #6b7280;
        font-size: 14px;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
        margin-bottom: 30px;
    }

    .stat-card {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 22px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    }

    .stat-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 18px;
    }

    .stat-icon {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 9px;
        background: #f3f4f6;
        color: #1f2933;
        font-size: 17px;
    }

    .stat-label {
        color: #6b7280;
        font-size: 13px;
        font-weight: 500;
    }

    .stat-value {
        color: #1f2933;
        font-size: 28px;
        font-weight: 700;
        line-height: 1;
    }

    .content-grid {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
        gap: 22px;
    }

    .card {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 24px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    }

    .card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
    }

    .card-title {
        margin: 0;
        color: #1f2933;
        font-size: 17px;
        font-weight: 700;
    }

    .card-link {
        color: #374151;
        font-size: 12px;
        font-weight: 600;
        text-decoration: none;
    }

    .card-link:hover {
        text-decoration: underline;
    }

    .report-list {
        display: flex;
        flex-direction: column;
    }

    .report-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 15px 0;
        border-bottom: 1px solid #f0f0f0;
    }

    .report-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .report-item:first-child {
        padding-top: 0;
    }

    .report-info {
        min-width: 0;
    }

    .report-school {
        margin: 0 0 4px;
        color: #1f2933;
        font-size: 14px;
        font-weight: 600;
    }

    .report-period {
        color: #6b7280;
        font-size: 12px;
    }

    .status {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 5px 10px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
    }

    .status-generated {
        background: #f3f4f6;
        color: #4b5563;
    }

    .status-prepared {
        background: #e0f2fe;
        color: #075985;
    }

    .status-submitted {
        background: #fef3c7;
        color: #92400e;
    }

    .status-reviewed {
        background: #dcfce7;
        color: #166534;
    }

    .status-rejected {
        background: #fee2e2;
        color: #991b1b;
    }

    .empty-state {
        padding: 35px 15px;
        text-align: center;
        color: #6b7280;
        font-size: 13px;
    }

    .empty-state i {
        display: block;
        margin-bottom: 12px;
        color: #9ca3af;
        font-size: 28px;
    }

    .quick-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .action-link {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 13px 14px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background: #ffffff;
        color: #374151;
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        transition: 0.2s ease;
    }

    .action-link:hover {
        background: #f9fafb;
        border-color: #d1d5db;
    }

    .action-icon {
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 7px;
        background: #f3f4f6;
        color: #1f2933;
    }

    .action-text {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .action-title {
        color: #1f2933;
        font-size: 13px;
        font-weight: 600;
    }

    .action-description {
        color: #9ca3af;
        font-size: 11px;
        font-weight: 400;
    }

    .generation-card {
        margin-top: 22px;
        background: #1f2933;
        border-radius: 12px;
        padding: 24px;
        color: #ffffff;
    }

    .generation-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }

    .generation-title {
        margin: 0 0 6px;
        font-size: 16px;
        font-weight: 700;
    }

    .generation-description {
        margin: 0;
        color: #d1d5db;
        font-size: 12px;
        line-height: 1.6;
    }

    .generate-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 11px 17px;
        border: none;
        border-radius: 8px;
        background: #ffffff;
        color: #1f2933;
        font-family: "Poppins", Arial, sans-serif;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
    }

    .generate-button:hover {
        background: #f3f4f6;
    }

    @media (max-width: 1100px) {

        .stats-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .content-grid {
            grid-template-columns: 1fr;
        }

    }

    @media (max-width: 650px) {

        .stats-grid {
            grid-template-columns: 1fr;
        }

        .report-item {
            align-items: flex-start;
            flex-direction: column;
            gap: 10px;
        }

        .generation-content {
            align-items: stretch;
            flex-direction: column;
        }

        .generate-button {
            width: 100%;
        }

    }

</style>

{% endblock %}


{% block content %}

<div class="dashboard-header">

    <h1 class="dashboard-title">
        Admin Dashboard
    </h1>

    <p class="dashboard-subtitle">
        Manage schools, monthly reports, and report submissions.
    </p>

</div>


<div class="stats-grid">

    <div class="stat-card">

        <div class="stat-top">

            <span class="stat-label">
                Schools
            </span>

            <div class="stat-icon">
                <i class="fa-solid fa-school"></i>
            </div>

        </div>

        <div class="stat-value">
            {{ total_schools }}
        </div>

    </div>


    <div class="stat-card">

        <div class="stat-top">

            <span class="stat-label">
                Monthly Reports
            </span>

            <div class="stat-icon">
                <i class="fa-solid fa-file-lines"></i>
            </div>

        </div>

        <div class="stat-value">
            {{ total_reports }}
        </div>

    </div>


    <div class="stat-card">

        <div class="stat-top">

            <span class="stat-label">
                Awaiting Submission
            </span>

            <div class="stat-icon">
                <i class="fa-solid fa-clock"></i>
            </div>

        </div>

        <div class="stat-value">
            {{ awaiting_submission }}
        </div>

    </div>


    <div class="stat-card">

        <div class="stat-top">

            <span class="stat-label">
                Awaiting Review
            </span>

            <div class="stat-icon">
                <i class="fa-solid fa-magnifying-glass"></i>
            </div>

        </div>

        <div class="stat-value">
            {{ awaiting_review }}
        </div>

    </div>

</div>


<div class="content-grid">

    <div class="card">

        <div class="card-header">

            <h2 class="card-title">
                Recent Reports
            </h2>

            <a
                href="{{ url_for('reports') }}"
                class="card-link"
            >
                View All
            </a>

        </div>


        {% if recent_reports %}

            <div class="report-list">

                {% for report in recent_reports %}

                    <div class="report-item">

                        <div class="report-info">

                            <p class="report-school">
                                {{ report.school.name }}
                            </p>

                            <span class="report-period">
                                {{ report.reporting_period }}
                            </span>

                        </div>


                        {% if report.status == "generated" %}

                            <span class="status status-generated">
                                Generated
                            </span>

                        {% elif report.status == "prepared" %}

                            <span class="status status-prepared">
                                Prepared
                            </span>

                        {% elif report.status == "submitted" %}

                            <span class="status status-submitted">
                                Submitted
                            </span>

                        {% elif report.status == "reviewed" %}

                            <span class="status status-reviewed">
                                Reviewed
                            </span>

                        {% elif report.status == "rejected" %}

                            <span class="status status-rejected">
                                Rejected
                            </span>

                        {% else %}

                            <span class="status status-generated">
                                {{ report.status|title }}
                            </span>

                        {% endif %}

                    </div>

                {% endfor %}

            </div>

        {% else %}

            <div class="empty-state">

                <i class="fa-regular fa-file-lines"></i>

                No reports have been generated yet.

            </div>

        {% endif %}

    </div>


    <div class="card">

        <div class="card-header">

            <h2 class="card-title">
                Quick Actions
            </h2>

        </div>


        <div class="quick-actions">

            <a
                href="{{ url_for('create_school') }}"
                class="action-link"
            >

                <span class="action-icon">
                    <i class="fa-solid fa-school"></i>
                </span>

                <span class="action-text">

                    <span class="action-title">
                        Create School
                    </span>

                    <span class="action-description">
                        Create a school and login account
                    </span>

                </span>

            </a>


            <a
                href="{{ url_for('reports') }}"
                class="action-link"
            >

                <span class="action-icon">
                    <i class="fa-solid fa-file-lines"></i>
                </span>

                <span class="action-text">

                    <span class="action-title">
                        Monthly Reports
                    </span>

                    <span class="action-description">
                        View and manage reports
                    </span>

                </span>

            </a>


            <a
                href="{{ url_for('change_password') }}"
                class="action-link"
            >

                <span class="action-icon">
                    <i class="fa-solid fa-key"></i>
                </span>

                <span class="action-text">

                    <span class="action-title">
                        Change Password
                    </span>

                    <span class="action-description">
                        Update your account password
                    </span>

                </span>

            </a>

        </div>

    </div>

</div>


<div class="generation-card">

    <div class="generation-content">

        <div>

            <h2 class="generation-title">
                Generate Monthly Reports
            </h2>

            <p class="generation-description">
                Create the monthly Word report for every active school
                using the master report template.
            </p>

        </div>


        <form
            method="POST"
            action="{{ url_for('generate_monthly_reports') }}"
        >

            <input
                type="hidden"
                name="csrf_token"
                value="{{ csrf_token() }}"
            >

            <button
                type="submit"
                class="generate-button"
            >
                <i class="fa-solid fa-file-circle-plus"></i>
                Generate Reports
            </button>

        </form>

    </div>

</div>

{% endblock %}